<template>
    <main>
        <header>
            <div class='swipe' @click="plays()">
                <mt-swipe :auto="0">
                <mt-swipe-item v-for="(item,index) in product">
                    <img :src="item.src" alt="">
                </mt-swipe-item> 
                </mt-swipe>
            </div>
            <div class="ico_top">
                <div @click="back()">
                    <font-awesome-icon icon="chevron-left" class="ico_top_s"/>
                </div>       
            </div>
            <div class="ico_top2">
                <div>
                    <font-awesome-icon icon="heart" class="ico_top_s"/>
                    <font-awesome-icon icon="external-link-alt" class="ico_top_s"/>
                </div>
            </div>
            <div v-if="show" class="swipe_h" @click="plays()">
                <div class='swipe swipe_p' >
                    <mt-swipe :auto="3000">
                    <mt-swipe-item v-for="(item,index) in product">
                        <img :src="item.src" alt="" @click.stop="doSomething($event)">
                    </mt-swipe-item> 
                    </mt-swipe>
                </div>
            </div>
            <div class="price_wrap">
                <div class="price_bar_wrap">
                    <div class="main_price">
                        <span class="price">￥159</span>
                        <b>起</b>
                        <del class="opt">￥699</del>
                        <span class="opt">2.2折起</span>
                    </div>
                    <div class="pic">
                        <div class="label_pic"><img src="../assets/images/product/1590749967959_300x78_90.png" alt=""></div>
                        <div class="label">累计热卖2.4万件</div>
                    </div>
                </div>
            </div>
            <div class="product_name">
                <p>ins小清新全棉套件印花床单被套床上用品纯棉三/四件套</p>
                <span>博洋家纺</span>
            </div>
            <div class="product_guaranteed">
                <div class="product_guaranteed_pic">
                    <img src="../assets/images/product/1577086532213.png" alt="">
                </div>
                <div class="product_guaranteed_cell">100%正品 · 专业鉴定 · 正品险</div>
                <div >
                    <font-awesome-icon icon="chevron-right" class="ico"/>
                </div>
            </div>
        </header>
        <section>
            <div class="product_sku">
                <div class="list_1">
                    <div class="list_title"><span class="title">颜色</span></div>
                    <div class="list_option">
                        <li v-for="(item,index) in list" class="list_option_1">
                            <div class="list_group">
                                <div class="list_group_img">
                                    <img :src="item.src" alt="" >
                                    <span class="list_group_name">{{item.name}}</span>
                                </div>
                            </div>
                        </li>
                    </div>
                </div>
                <div class="list_1">
                    <div class="list_title"><span class="title">尺码</span></div>
                    <div class="list_option">
                        <li v-for="(item,index) in list2" class="list_option_2">
                            <div class="list_group_2">
                                <div class="list_group_list">
                                    <span class="list_group_name">{{item.name}}</span>
                                </div>
                            </div>
                        </li>
                    </div>
                </div>
            </div>
            <div class="product_container">
                <span class="title">商品参数</span>
                <span class="product_container_text">面料、件数、面料支数等</span>
                <div class="ico_down"><img src="../assets/images/product/下载.png" alt="" ></div>
            </div>
            <div class="product_container">
                <span class="title">配送至</span>
                <span class="product_container_address">请选择配送地址</span>
                <div class="ico_map"><font-awesome-icon icon="map-marker-alt" class="ico_map_1"/></div>
            </div>
            <div class="product_feright">
                <span class="title">运费</span>
                <span class="product_feright_vip">新会员专享首单满38元免邮（限唯品自营商品，部分商品不可用）</span>
            </div>
            <div class="product_container">
                <ul>
                    <li v-for="(item,index) in services">
                        <font-awesome-icon :icon="item.ico" class="ico_services"/>
                        <span>{{item.name}}</span>
                    </li>
                </ul>
                <div class="ico_down1"><img src="../assets/images/product/下载.png" alt="" ></div>
            </div>
            <div class="flex_box">
                <div class="brand">
                    <div class="logo">
                        <img :src="logo" alt="">
                    </div>
                    <div class="brand_info">
                        <p class="brand_name">博洋家纺</p>
                        <p class="brand_desc">引领精致舒适的优质生活，时尚浪漫</p>
                    </div>
                </div>
                <div class="vip-button">
                    收藏
                </div>  
            </div>
            <div class="brand-ft">
                <span>查看品牌</span>
            </div>
        </section>
        <footer>
            <div class="cart_box">
                <div class="custom">
                    <img src="../assets/images/product/custom.png" alt="">
                    <div><span>客服</span></div>
                </div>
                <router-link :to="'/checkout'">
                    <div class="cart">
                        <img src="../assets/images/product/cart.png" alt="">
                        <div><span>购物车</span></div>                                   
                    </div>
                </router-link>     
                <div class="cart_mainPrice">
                    <div class="cart_price1">
                        <span>￥599</span>
                        <p>市场价</p>
                    </div>
                    <div class="cart_price2">
                        <span>￥139起</span>
                        <p>特卖价 抢></p>
                    </div>
                </div>
            </div>
        </footer>
    </main>
</template>
<script>
    export default {
        data(){
            return {
                show:false,
                product:[
                    {
                        src:"./data/images/product/1e81a097-01f6-49c9-b92e-7239309a1596_720x909_70.jpg"
                    },
                    {
                        src:"./data/images/product/77145bd2-eaf3-4340-b329-25c7834a8358_720x909_70.jpg"
                    },
                    {
                        src:"./data/images/product/81613b19-f6db-4b8d-8e73-af2f805f10f9_720x909_70.jpg"
                    },
                    {
                        src:"./data/images/product/7ba12c25-5b11-404c-bad1-435c5c4cca75_720x909_70.jpg"
                    },
                    {
                        src:"./data/images/product/c9aab4d6-e720-4187-9f1c-4ac469b1c365_720x909_70.jpg"
                    },
                    {
                        src:"./data/images/product/745a6e9a-89cd-4bd7-8142-e1b824737f15_720x909_70.jpg"
                    },
                    {
                        src:"./data/images/product/f35053dc-15a5-4f2f-9704-3e5d87d645b3_720x909_70.jpg"
                    }
                ],
                list:[
                    {
                        src:"./data/images/product/1/149cb733-884a-44c2-9c77-ad1270083c2c_720x909_70.jpg",
                        name:"绅士风度"
                    },
                    {
                        src:"./data/images/product/1/b319ea55-3253-493e-bd27-0a8f44b255bf_720x909_70.jpg",
                        name:"拾花酿春"
                    },
                    {
                        src:"./data/images/product/1/1e81a097-01f6-49c9-b92e-7239309a1596_720x909_70.jpg",
                        name:"春雨泽木"
                    },
                    {
                        src:"./data/images/product/1/4293c566-bd9b-4021-aac8-7aaab5efb980_720x909_70.jpg",
                        name:"树林狂欢"
                    },
                    {
                        src:"./data/images/product/1/8048f761-23ea-406c-97cb-67d49e86c42e_720x909_70.jpg",
                        name:"江南春浓"
                    },
                    {
                        src:"./data/images/product/1/2b532c66-a05c-4ae0-afab-4fb18bb1e2c1_720x909_70.jpg",
                        name:"猫爪杯"
                    },
                    {
                        src:"./data/images/product/1/5131eef0-8a48-48e7-b428-d5c40819050a_720x909_70.jpg",
                        name:"菠萝先生"
                    },
                    {
                        src:"./data/images/product/1/fe0144d5-f385-4a9d-97c3-6b02d11e8ba3_720x909_70.jpg",
                        name:"西耶娜"
                    },
                    {
                        src:"./data/images/product/1/7c6460c3-fd27-48fb-9204-d13022f893d8_720x909_70.jpg",
                        name:"赫莱尼"
                    },
                    {
                        src:"./data/images/product/1/eaacde80-9947-4f4f-9e34-8489ede2dbd3_720x909_70.jpg",
                        name:"软萌爪"
                    }
                ],
                list2:[
                    {
                        name:"1.2m床/150*210cm/三件套"
                    },
                    {
                        name:"1.5m床/200*230cm/四件套"
                    },
                    {
                        name:"1.8/2m床/220*240cm/四件套"
                    }
                ],
                services:[
                    {
                        name:"唯品会发货及售后",
                        ico:"check-circle"
                    },
                    {
                        name:"顺丰配送",
                        ico:"check-circle"
                    },
                    {
                        name:"7天无理由退货",
                        ico:"check-circle"
                    },
                    {
                        name:"退货无忧",
                        ico:"check-circle"
                    },
                    {
                        name:"不支持换货",
                        ico:"exclamation-circle"
                    },
                ],
                logo:"./data/images/product/1/primary.png"
            }
        },
        mounted(){
            if(this.$route.params!=''){
                this.$http.get('./data/details.json')
                .then((response)=> {
                    console.log(response);
                    let a=this.$route.params.pa;
                    this.data=response.data.datas[a].list
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    // always executed
                });
            }
        },
        methods:{
            plays(){
                this.show=!this.show;      
            },
            back(){
                this.$router.go(-1)
            }
        }
    }
</script>
<style scoped>
    main{
        background-color: #f3f4f5;
    }
    main:after{
        content: "";
        display: table;
        clear: both;
    }
    .swipe{
        width: 100vw;
        height: 100vw;
    }
    .swipe img{
        width: 100vw;
        height: 100vw;
    }
    .swipe_h{
        width: 100vw;
        height: 100vh;
        position: absolute;
        top: 0;
        background-color: black;
        background: rgba(0,0,0,0.6);
        z-index: 9999;
    }
    .swipe_p{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 10000;
    }
    .ico_top{
        position: absolute;
        top:0;
        left: 0;
        padding: 3vw;
        /* width: 100vw; */
    }
    .ico_top2{
        position: absolute;
        top:0;
        right: 0;
        padding: 3vw;
        /* width: 100vw; */
    }
    .ico_top>div{
        width: 10vw;
        height: 10vw;
        text-align: center;
        padding: 2.5vw 0;
        border-radius: 50%;
        background: rgba(0,0,0,.5);
    }
    .ico_top2>div{
        padding: 2.5vw 5vw;
        border-radius: 10vw;
        background: rgba(0,0,0,.5);
    }
    .ico_top_s{
        font-size: 5vw;
        color: #fff;
    }
    .ico_top_s:nth-of-type(2){
        margin-left: 2vw;
    }
    .price_wrap{
        position: relative;
        background-image: url('../assets/images/product/1597801542667_1830x318_90.png');
        background-size:100% 100%;
        width: 100vw;
        height: 19.733vw;
    }
    .price_bar_wrap{
        width: 94vw;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .main_price{
        /* width: 75vw; */
        color: white;
        float: left;
        margin-top: 1vw;
    }
    .main_price>b{
        font-size: 4vw;
    }
    .price{
        font-size: 6vw;
    }
    .opt{
        opacity: .6;
        font-size: 4vw;
    }
    .pic{
        float: right;
    }
    .label_pic>img{
        width: 16vw;
        float: right;
        margin-top: 1vw;
    }
    .label{
        color: white;
        float: right;
        margin-top: 1vw;
    }
    .product_name{
        position: relative;
        padding: 3vw;
        height: 25vw;
        background-color: #fff;
    }
    .product_name>p{
        font-size: 4vw;
    }
    .product_name>span{
        position: absolute;
        bottom: 3vw;
        color: #4a90e2;
    }
    .product_guaranteed{
        vertical-align: middle;
        background: #fff;
        padding: 3vw;
        margin-top: 2vw;
    }
    .product_guaranteed:after{
        content: "";
        display: table;
        clear: both;
    }
    .product_guaranteed_pic{
        float: left;
        /* width: 20vw; */
        line-height: 10vw;
    }
    .product_guaranteed_pic>img{
        vertical-align: middle;
        margin-right: 3vw;
        width: 20vw;
    }
    .product_guaranteed_cell{
        float: left;
        height: 10vw;
        line-height: 10vw;
    }
    .ico{
        float: right;
        height: 10vw;
        line-height: 10vw;
        color: #c5c5c5;
    }
    .product_sku{
        margin-top: 2vw;
        padding: 4vw 0;
        background-color: #fff;
    }
    .list_1{
        padding-bottom: 3vw;
    }
    .list_1:after{
        content: "";
        display: table;
        clear: both;
    }
    .list_title{ 
        padding: 0 3vw;
        margin-bottom: 1vw;
    }
    .title{
        font-size: 4vw;
        font-weight: 900;
    }
    .list_option_1{
        width: 32.333vw;
        float: left;
    }
    .list_group{
        width: 29.333vw;
        margin: 2.5vw 0 0 3vw;
        border: 1px solid #c5c5c5;
        padding: 1.5vw;
    }
    .list_group_img{
        height: 5vw;
    }
    .list_group_img>img{
        float: left;
        height: 5vw;
        width: 5vw;
        margin-right: 2vw;
    }
    .list_group_name{
        display: block;
        text-align: center;
        line-height: 5vw;
    }
    .list_group_2{
        margin: 2.5vw 0 0 3vw;
        border: 1px solid #c5c5c5;
        padding: 1.5vw;
    }
    .list_group_list{
        height: 5vw;
    }
    .list_option_2{
        float: left;
    }
    .product_container{
        padding: 3vw;
        margin-top: 2vw;
        background: #fff;
    }
    .product_container_text{
        margin-left: 3vw;
    }
    .product_container_address{
        margin-left: 2vw;
    }
    .ico_down{
        width: 5vw;
        float: right;   
    }
    .ico_down>img{
        width: 5vw;
    }
    .ico_map{
        height: 3vw;
        display: inline-block;
    }
    .ico_map_1{
        height: 3vw;
        color: #b9bec7;
    }
    .product_feright{
        border-top:1px solid #f3f4f5;
        padding: 3vw;
        background: #fff;
        display: flex;
        align-items: center;
    }
    .product_feright>span:nth-of-type(1){
        display: inline-block;
        width: 17vw;
    }
    .product_feright_vip{
        word-break: break-all;       
    }
    footer{
        /* display: flex; */
        width: 100vw;
        height: 15vw;
    }
    footer:after{
        content: "";
        display: table;
        clear: both;
    }
    .cart_box{
        /* flex: none;
        -webkit-box-flex: 0;
        -webkit-flex: none;
        -ms-flex: none; */
        padding: 1vw 4vw;
        position: fixed;
        bottom: 0;
        width: 100vw;
        height: 15vw;
        border-top: 1px solid #f3f4f5;
        background-color: #fff;
        margin-top: 2px;
    }
    .cart_box img{
        width: 5vw;
    }
    .custom{
        float: left;
        text-align: center;
        padding: 1.5vw 3vw 0 0;
    }
    .cart{
        float: left;
        text-align: center;
        padding: 1.5vw 3vw 0 0;
    }
    .cart span{
        color: black;
    }
    .cart_mainPrice{
        width: 71vw;
        height: 100%;
        float: left;
        overflow: hidden;
        border-radius: 2vw;
    }
    .cart_mainPrice span{
        display: inline-block;
        margin-top: 1.5vw;
        font-size: 4vw;
        color: #fff;
    }
    .cart_mainPrice p{
        color: #fff;
    }
    .cart_price1{
        float: left;
        width: 45%;
        height: 100%;
        background-color: #f688a4;
        text-align: center;
    }
    .cart_price2{
        float: left;
        width: 55%;
        height: 100%;
        background-color: #f03867; 
        text-align: center;     
    }
    .product_container>ul{
        width: 89vw;
        float: left;
    }
    .product_container li{
        float: left;
        margin-right: 3vw;
    }
    .ico_services{
        color: #f688a4;
    }
    .product_container:after{
        content: "";
        display: table;
        clear: both;
    }
    .ico_down1{
        width: 5vw;
        float: right;   
        margin-top: 1.5vw;
    }
    .ico_down1>img{
        width: 5vw;
    }
    .flex_box{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        padding: 3vw;
        margin-top: 2vw;
        background: #fff;
        justify-content:space-between
    }
    .logo{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        height: 14vw;
        width: 14vw;
        border: 1px solid #f3f4f5;
        float: left;
        margin-right: 3vw;
    }
    .logo>img{
        max-width: 14vw;
        max-height: 14vw;
    }
    .brand{
        width: 70vw;
    }
    .brand_info{
        float: left;
    }
    .brand_name{
        margin-top: 2.5vw;
    }
    .brand_desc{
        color:#98989f;
        margin-top: 1vw;
    }
    .vip-button{
        padding: 1vw 5vw;
        border: 1px solid #de3d96;
        border-radius: 1vw;
        color: #de3d96;
    }
    .brand-ft{
        padding: 4vw 0;
        text-align: center;
        border-top: 1px solid #f3f4f5;
        background: #fff;
        color: #585c64;
    }
</style>